<template>
	<view class="">
		<match-media :min-width="960">
			<view class="navTop flex jcsa aic">
				<view class=""></view>
				<view>小易通在线协同系统</view>
				<view class="flex">
					<van-button class="btn mgr40" @click="createItem">创建项目</van-button>
					<van-button class="btn">我的项目</van-button>
				</view>
			</view>
		</match-media>
		<match-media :max-width="960">
			<view class="navTop flex column">
				<view class="flex aic jcsa">
					<view class=""></view>
					<view class="">小易通在线协同系统</view>
					<van-icon name="setting-o" />
				</view>
				<view class="flex jcc aic search">
					<van-search v-model="value" placeholder="请输入搜索关键词" class="input" :clearable="false" @search="search" />
					<!-- <van-field v-model="value" placeholder="栏目名/页面名/关键词" center /> -->
					<!-- <input placeholder="栏目名/页面名/关键词" v-model="value" class="input" @blur="search" /> -->
					<van-icon name="scan" />
				</view>
			</view>
		</match-media>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const value = ref<String>('');
function createItem(): void {
	uni.navigateTo({
		url: '/pages/from/createdPage'
	});
}
function search(): void {
	console.log(value.value);
}
</script>

<style lang="scss">
.navTop {
	height: 200rpx;
	background-color: aqua;
	line-height: 200rpx;
	font-size: 60rpx;
	font-weight: bold;
	color: blue;
	@media (max-width: 960px) {
		font-size: 36rpx;
		background-color: #00aaff;
		color: #fff;
		line-height: 100rpx;
	}
	.btn {
		background-color: #e7e700;
		font-size: 36rpx;
		color: #f5f5f5;
	}
	.van-icon {
		font-size: 44rpx;
	}
	.search .input {
		// height: 20rpx;
		width: 70%;
		background-color: #f7f8fa;
		color: #000;
		padding: 10rpx;
		font-size: 26rpx;
		line-height: 2;
		margin-right: 20rpx;
		border-radius: 3rpx;
	}
}
</style>
